<template>
    <div class="my-course-box">
        <div class="title-tools">
            <h2 class="tit">{{ $t('my_course.tit') }}</h2>
            <div>
                <el-button color="#d24c0e" @click="goPage('/console/course/create')" v-if="roleStore.isSuperAdmin">{{ $t('my_course.btn_text_1') }}</el-button>
                <el-button color="#d24c0e" @click="goPage('/console/course/category')" v-if="roleStore.isSuperAdmin">{{ $t('my_course.btn_text_2') }}</el-button>
            </div>
        </div>
        <div class="my-course-list" v-loading="courseListLoading">
            <div class="course-item" v-for="courseItem in courseList" :key="courseItem.id" @click="goPage(`/console/course/${courseItem.id}`)">
                <div class="course-poster">
                    <div class="pic">
                        <!-- <img class="ele" :src="courseItem.image_url" alt="" /> -->
                         <el-image :src="courseItem.image_url" fit="contain">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon><icon-picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                    </div>
                </div>
                <div class="course-info">
                    <div class="course-tit">{{ courseItem.name }}</div>
                    <div class="course-time">
                        <b>{{ $t('my_course.start_time') }}</b>
                        {{ formatLoginTime(courseItem.start_date) }}
                    </div>
                    <div class="course-time">
                        <b>{{ $t('my_course.end_time') }}</b>
                        {{ formatLoginTime(courseItem.end_date) }}
                    </div>
                    <el-button color="#d24c0e" @click.stop="goPage(`/console/course/${courseItem.id}`)">{{ $t('my_course.btn_text_3') }}</el-button>
                    <el-button color="#d24c0e" @click.stop="goPage(`/console/course/${courseItem.id}/edit`)" v-if="roleStore.isSuperAdmin">{{ $t('my_course.btn_text_4') }}</el-button>
                </div>
            </div>
        </div>
        <div class="pagination-box">
            <el-pagination
                
                background
                v-model:page-size="pagination.limit"
                v-model:current-page="pagination.page"
                layout="sizes, prev, pager, next"
                :total="pagination.total"
                :page-sizes="[10, 20, 50, 100]"
                class="mt-4"
                :hide-on-single-page="true"
                @size-change="getCourseList"
                @current-change="getCourseList"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRoleStore } from '@/stores/role'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import CourseService from '@/api/course'
import type { CourseItem } from '@/types/course'

import { goPage, formatLoginTime } from '@/utils/global'
import type { Pagination } from '@/types/global'
// 分页器
const pagination = ref<Pagination>({
    page: 1,
    limit: 10,
    total: 10,
})
const roleStore = useRoleStore()

// 课程列表
const courseList = ref<CourseItem[]>([])
// 加载状态
const courseListLoading = ref(false)

// 获取课程列表数据
function getCourseList() {
    courseListLoading.value = true
    const searchData = {
        page: pagination.value.page,
        limit: pagination.value.limit,
    }
    CourseService.getUserCourseList(searchData)
        .then(res => {
            courseList.value = res.dataList || [];
            pagination.value = res.pagination || pagination.value
        })
        .finally(() => {
            courseListLoading.value = false
        })
}

onMounted(() => {
    getCourseList()
})
</script>

<style lang="less" scoped>
@import '@/assets/styles/variable.less';
.pagination-box{
    justify-content: center;
    margin-top: 25px;
}
.my-course-box {
    .title-tools {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tit {
            margin-bottom: 10px;
            font-size: 30px;
            color: #000;
            line-height: 1.2;
            font-weight: 400;
        }
    }

    .my-course-list {
        .course-item {
            margin-bottom: 45px;
            box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
            border-left: 1px solid #f06423;
            padding: 20px 15px;
            background-color: #f4f4f4;
            cursor: pointer;
            display: flex;
            flex-direction: row;
            @media screen and (max-width: @sPhone) {
                flex-direction: column;
                margin-bottom: 20px;
            }
            &:last-child {
                margin-bottom: 0;
            }

            .course-poster {
                width: 40%;
                flex-shrink: 0;
                @media screen and (max-width: @sPhone) {
                    width: 100%;
                }
                .pic {
                    width: 100%;
                    @media screen and (max-width: @sPhone) {
                        min-height: 207px;
                    }
                    .el-image{
                        width: 100%;
                        height: 207px;
                        background: #D2D2D2;
                    }
                    .image-slot {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        
                        font-size: 30px;
                    }
                    .image-slot .el-icon {
                        font-size: 30px;
                    }

                }
            }

            .course-info {
                padding-left: 30px;
                @media screen and (max-width: @sPhone) {
                    width: 100%;
                    padding-left: 0;
                    margin-top: 10px;
                }
                .course-tit {
                    margin-bottom: 5px;
                    font-size: 20px;
                    color: #000;
                    line-height: 1.25;
                }

                .course-time {
                    font-size: 12px;
                    color: #4c4c4c;
                }

                .el-button {
                    margin-top: 12px;
                }
            }
        }
    }
}
</style>
